<!doctype html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=false" />
    <title>个人介绍</title>
  </head>
  <body>
    <div id="app-container">
      <div id="info-panel">
        <div class="fixer">
          <div class="avatar"></div>
          <div class="information">
            <h2>靛青色个人主题</h2>
            <span>清醒淡雅 沉着稳重</span>
          </div>
        </div>
      </div>
      <div id="main-page"></div>
    </div>
  </body>
</html>
<style>
  html,
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  #app-container {
    display: flex;
    height: 100%;
    overflow: hidden;
  }

  #info-panel {
    flex: 1;
    background-color: #1661ab;
  }

  #main-page {
    flex: 2;
  }

  .fixer {
    width: 100%;
    top: 0;
    left: 0;
  }

  .avatar {
    width: 128px;
    height: 128px;
    margin: 45% auto 0 auto;
    background: #ffffff url("./avatar_128px.png");
    border-radius: 50%;
  }

  .information {
    width: 100%;
    padding-top: 24px;
    padding-bottom: 24px;
    text-align: center;
    color: #ffffff;
  }

  @media only screen and (max-device-width: 768px) {
    #app-container {
      display: flex;
      flex-direction: column;
    }

    .avatar {
      margin-top: 8%;
    }

    .information h3 {
      padding: 8px;
    }
  }
</style>
